<template>
	<view class="height-screen">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('mine.feedBack')}}</block>
		</cu-custom>
		<view class="margin-ht grid gap" style="margin-top: 20rpx;">
			<text class="font-400 text-black" style="font-size: 30rpx;">{{$t('mine.feedBack')}}</text>
			<u-textarea v-model="msg" :placeholder="$t('public.placeholderContent')" :customStyle="inputStyle" count
				maxlength="500"></u-textarea>
			<text class="font-400 text-black" style="font-size: 30rpx;">{{$t('public.img')}}</text>
			<uploadImg @sendImage="sendImage" @delImage="delImage" />
		</view>
		<view style="position: fixed;bottom: 60rpx;left: 25rpx;right: 25rpx;">
			<view class="setButton" style="height: 90rpx;background: #06C168;border-radius: 40rpx;"
				@tap.stop="feedbackAdd">
				<text class="font-400 text-df text-white">{{$t('public.release')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uploadImg from '@/components/uploadImg.vue'
	import {
		feedbackAdd
	} from '@/apis'
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				msg: '',
				inputStyle: {
					background: '#FFFFFF',
					borderRadius: '20rpx'
				},
				images: [],
			}
		},
		methods: {
			sendImage(event, keyWord) {
				this.images = [...this.images, ...event.sendList.splice(0, event.fileListLen)]
			},
			delImage(e) {
				this.images.splice(e, 1)
			},
			async feedbackAdd() {
				await this.helper.checkForm([
					['string', this.msg, this.$t('mine.feedBack')],
					['string', this.images.join(','), this.$t('public.img')],
				])
				await feedbackAdd({
					msg: this.msg,
					images: this.images.join(','),
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-textarea,
	/deep/ .u-input {
		border: none;
	}
</style>